<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>订单详情</title>
	<link rel="shortcut icon" href="../img/favicon.ico">
	<link rel="stylesheet" href="../css/reset.css" />
	<link rel="stylesheet" href="../css/indentDetils.css" />
	<script src="../them/jquery/jquery-1.7.2.js"></script>
	<script src="../them/jquery/jquery.cookie.js"></script>
	<style>
	</style>
</head>
<body>
<!--头部-->
<div class="site-topbar">
	<div class="container">
		<div class="topbar-nav">
			<a href="javascript:;">在线客服</a>
			<a href="javascript:;">艾百科</a>
			<a href="javascript:;">养生百科</a>
			<a href="javascript:;">艾家商城移动版</a>
		</div>
		<div class="topbar-cart">
			<a href="shopCart.html" class="cart-mini">
				<span class="cart"></span>
				<span>购物车</span>
				<span class="gwc_number"></span>
			</a>
		</div>
		<div class="topbar-info">
			<div class="login" style="display: inline-block">
				<a href="login.html">登录</a>
				<a href="register.html">注册</a>
			</div>
			<a href="javascript:;">消息通知</a>
			<!--<div class="info_select">
				<a href="personal-center.html">个人中心</a>
				<a href="user-favorite.html">我的喜欢</a>
				<a href="login.html">退出登录</a>
			</div>-->
		</div>
	</div>
</div>
<!--导航-->
<div class="site-header">
	<div class="container">
		<div class="header-logo">
			<a href="index.html">
				<span class="logo"></span>
			</a>
		</div>
		<div class="header-nav">
			<ul class="nav-list">
				<li class="nav-item">
					<a href="javacsript:;" class="link">
						<span>艾灸</span>
					</a>
					<div class="header-nav-menu">
						<div class="container">
							<ul class="children-list clearfix">
								<li style="border-left: 0">
									<div class="figure figure-thumb">
										<a href="javascript:;">
											<img src="http://192.168.31.3:18089/z1.jpg" >
											<p class="tittle">景德镇艾灸礼包</p>
											<p class="price">999元</p>
										</a>
									</div>
								</li>
								<li>
									<div class="figure figure-thumb">
										<a href="javascript:;">
											<img src="http://192.168.31.3:18089/z2.jpg" >
											<p class="tittle">独家艾灸</p>
											<p class="price">999元</p>
										</a>
									</div>
								</li>
								<li>
									<div class="figure figure-thumb">
										<a href="javascript:;">
											<img src="http://192.168.31.3:18089/z3.jpg" >
											<p class="tittle">顶级艾灸</p>
											<p class="price">999元</p>
										</a>
									</div>
								</li>
								<li>
									<div class="figure figure-thumb">
										<a href="javascript:;">
											<img src="http://192.168.31.3:18089/z4.jpg" >
											<p class="tittle">多功能艾灸床</p>
											<p class="price">999元</p>
										</a>
									</div>
								</li>
							</ul>
						</div>
					</div>
				</li>
				<li class="nav-item">
					<a href="javacsript:;" class="link">
						<span>设备</span>
					</a>
					<div class="header-nav-menu">
						<div class="container">
							<ul class="children-list clearfix">
								<li style="border-left: 0">
									<div class="figure figure-thumb">
										<a href="javascript:;">
											<img src="http://192.168.31.3:18089/zb1.jpg" >
											<p class="tittle">推拿仪</p>
											<p class="price">999元</p>
										</a>
									</div>
								</li>
								<li>
									<div class="figure figure-thumb">
										<a href="javascript:;">
											<img src="http://192.168.31.3:18089/aj1.jpg" >
											<p class="tittle">艾香</p>
											<p class="price">999元</p>
										</a>
									</div>
								</li>
								<li>
									<div class="figure figure-thumb">
										<a href="javascript:;">
											<img src="http://192.168.31.3:18089/cx1.jpg" >
											<p class="tittle">艾灸盒</p>
											<p class="price">999元</p>
										</a>
									</div>
								</li>

							</ul>
						</div>
					</div>
				</li>
				<li class="nav-item">
					<a href="javacsript:;" class="link">
						<span>艾柱</span>
					</a>
					<div class="header-nav-menu">
						<div class="container">
							<ul class="children-list clearfix">
								<li style="border-left: 0">
									<div class="figure figure-thumb">
										<a href="javascript:;">
											<img src="http://192.168.31.3:18089/LH2.jpg" >
											<p class="tittle">艾柱贴</p>
											<p class="price">899元</p>
										</a>
									</div>
								</li>
							</ul>
						</div>
					</div>
				</li>
				<li class="nav-item">
					<a href="javacsript:;" class="link">
						<span>文化</span>
					</a>
					<div class="header-nav-menu">
						<div class="container">
							<ul class="children-list clearfix">
								<li style="border-left: 0">
									<div class="figure figure-thumb">
										<a href="javascript:;">
											<img src="http://192.168.31.3:18089/LH3.jpg" >
											<p class="tittle">传艾图</p>
											<p class="price">1999元</p>
										</a>
									</div>
								</li>
								<li>
									<div class="figure figure-thumb">
										<a href="javascript:;">
											<img src="http://192.168.31.3:18089/sj1.jpg" >
											<p class="tittle">艾草书</p>
											<p class="price">99元</p>
										</a>
									</div>
								</li>
								<li>
									<div class="figure figure-thumb">
										<a href="javascript:;">
											<img src="http://192.168.31.3:18089/sj4.jpg" >
											<p class="tittle">艾灸百科</p>
											<p class="price">99元</p>
										</a>
									</div>
								</li>

							</ul>
						</div>
					</div>
				</li>
			</ul>
		</div>
		<div class="header-search">
			<div class="search-form clearfix">
				<input class="search-text" type="text">
				<input type="submit" class="search-btn" value=" ">

				<div class="search-hot-words">
					<a href="javasctipy:;">艾灸</a>
					<a href="javascript:;">艾棒</a>
				</div>
				<div class="keyword-list hide">
					<ul class="result-list"></ul>
				</div>
			</div>
		</div>
	</div>
</div>
<div id="conetent_wrapper">
	<div id="content">
		<div class="indent_box">
			<div class="indent_title clearfix">
				<p class="fl">订单详情</p>
				<span class="fl">请谨防钓鱼链接或诈骗电话！</span>
			</div>
			<div class="clearfix indent_num_box">
				<div class="indent_num fl">
					订单号：<span class="indent_num_i"></span>
				</div>
				<div class="fr pay_box">
					<a href="payindent.html" class="fr pay">立即支付</a>
					<a href="#" class="fr cancel">取消订单</a>
				</div>

			</div>
			<div class="indent_details">
				<p class="indent_status statusDesc">等待付款</p>
				<p class="indent_predict">1小时52分后订单将被关闭</p>
			</div>
			<ul class="progress_bar">
				<li>下单 <span class="progress_time createTime"></span></li>
				<li>付款<span class="progress_time paymentTime"></span></li>
				<li>配货</li>
				<li>出库</li>
				<li>交易完成</li>
				<p class="bar"></p>
			</ul>
			<ul class="goods_list">
				<!--<li>
					<div class="figure">
						<a href="">
							<img src="img/top.jpg" height="80" width="80" alt="">
						</a>
					</div>
					<p class="goods_name">小米手机</p>
					<p class="goods_pric">95元×1</p>
				</li>-->
			</ul>
			<div class="site_box">
				<div class="site_title">收货信息
					<!--<p class="site_modification">修改</p>-->
				</div>
				<ul>
					<li>姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 名：
						<span class="site_name name"></span>
					</li>
					<li>联系电话：
						<span class="site_tell phone">188****8888</span>
					</li>
					<li>收货地址：
						<span class="site_site address">北京市</span>
					</li>
				</ul>
			</div>
			<div class="site_box">
				<div class="site_title">支付方式及送货时间
					<p class="pay_modification">修改</p>
				</div>
				<ul>
					<li>支付方式：
						<span class="site_pay_function">在线支付</span>
					</li>
					<li>送货时间：
						<span class="site_time">不限送货时间</span>
					</li>
					<li>送货时效：
						<span class="site_site">预计五天内发货</span>
					</li>
				</ul>
			</div>
			<div class="site_box">
				<div class="site_title">发票信息
				</div>
				<ul>
					<li>发票类型：
						<span class="site_name">电子发票</span>
					</li>
					<li>发票内容
						<span class="site_tell">购买商品明细</span>
					</li>
					<li>发票抬头：
						<span class="site_site">个人</span>
					</li>
				</ul>
			</div>
			<div class="billing_information">
				<ul>
					<li>商品总价：<span class="payment"></span></li>
					<li>运&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 费：<span class="postage">0元</span></li>
				</ul>
				<div class="practical_money">
					<p class="practical_money_text">实付金额：</p>
					<p class="practical_money_num"></p>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="footer">
	<div class="fuwu">
		<ul>
			<li>预约维修服务</li>
			<li>7天无理由退货</li>
			<li>15天免费换货</li>
			<li>满150元包邮</li>
			<li>520余家售后网点</li>
		</ul>
	</div>
	<div class="fuwu_det clearfix">
		<ul class="fl fuwu_det_item">
			<li class="fuwu_det_i fl">
				<p>帮助中心</p>
				<ul>
					<li>账户管理</li>
					<li>购物指南</li>
					<li>订单操作</li>
				</ul>

			</li>
			<li class="fuwu_det_i fl">
				<p>帮助中心</p>
				<ul>
					<li>账户管理</li>
					<li>购物指南</li>
					<li>订单操作</li>
				</ul>
			</li>
			<li class="fuwu_det_i fl">
				<p>帮助中心</p>
				<ul>
					<li>账户管理</li>
					<li>购物指南</li>
					<li>订单操作</li>
				</ul>
			</li>
			<li class="fuwu_det_i fl">
				<p>帮助中心</p>
				<ul>
					<li>账户管理</li>
					<li>购物指南</li>
					<li>订单操作</li>
				</ul>
			</li>
			<li class="fuwu_det_i fl">
				<p>帮助中心</p>
				<ul>
					<li>账户管理</li>
					<li>购物指南</li>
					<li>订单操作</li>
				</ul>
			</li>
			<li class="fuwu_det_i fl">
				<p>帮助中心</p>
				<ul>
					<li>账户管理</li>
					<li>购物指南</li>
					<li>订单操作</li>
				</ul>
			</li>
		</ul>
		<ul class="fl fuwu_det_tel">
			<li class="fuwu_det_num">400-100-5678</li>
			<li class="fuwu_det_time">周一至周日 8:00-18:00</li>
			<li class="fuwu_det_time">（仅收市话费）</li>
			<li class="fuwu_det_btn">24小时在线客服</li>
		</ul>
	</div>
	<div class="bottom clearfix">
		<div class="logo_b fl"></div>
		<div class="bottom_text fl">
			<ul>
				<li>艾家商城</li>
				<li>AiJia</li>
				<li>艾聊</li>
				<li>多看书城</li>
				<li>艾生活艾草</li>
				<li>艾疗</li>
				<li>艾家天猫店</li>
				<li>艾家淘宝直营店</li>
				<li>aijia.com</li>
			</ul>
			<p>aijia.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2014]0059-0009号</p>
			<p>违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
		</div>
		<div class="bottom_img fl">
			<img src="../../img/truste.png" alt="">
			<img src="../../img/v-logo-1.png" alt="">
			<img src="../../img/v-logo-2.png" alt="">
			<img src="../../img/v-logo-3.png" alt="">
		</div>
	</div>
</div>

<div class="sms_verification_box" style="display:none;">
	<div class="sms_verification">
		<div class="sms_top">
			短信验证
			<span class="close">×</span>
		</div>
		<div class="sms_center">
			<p class="sms_tetx">为了确保你的购物安全</p>
			<p class="sms_tetx mg_b">我们将向你当前的小米账号绑定的手机号发送验证码</p>
			<div class="tell_box">
				<p class="tell_text">手机号码：<span class="tell_num">188****8888</span></p>
				<input type="text" placeholder="验证码" class="auth_code">
				<input type="button" class="tell_btn" value="获取验证码">
			</div>

		</div>
		<div class="sms_bottom">
			<div class="sms_bottom_box clearfix">
				<span class="fl abolish">取消</span>
				<span class="fr ascertain">确定</span>
			</div>
		</div>
	</div>
</div>
<div class="delivery_verification_box" style="display:none">
	<div class="sms_verification">
		<div class="sms_top">
			送货时间
			<span class="close">×</span>
		</div>
		<div class="sms_center">
			<ul class="delivery_box">
				<li class="fl active">
					<p class="title">不限时间</p>
					<p class="txt">周一至周日</p>
				</li>
				<li class="fl ">
					<p class="title">工作日送货</p>
					<p class="txt">周一至周五</p>
				</li>
				<li class="fl ">
					<p class="title">双休日、假日送货</p>
					<p class="txt">周六至周日</p>
				</li>
			</ul>
		</div>
		<div class="sms_bottom">
			<div class="sms_bottom_box clearfix">
				<span class="fl abolish">取消</span>
				<span class="fr ascertain">确定</span>
			</div>
		</div>
	</div>
</div>
<script>
	/*存搜索字段*/
    $('.search-btn').click(function(){
        var html=$('.search-text').val();
        if(html.length==0){
            return;
        }
        var cookietime = new Date();
        var date = new Date();
        cookietime.setTime(date.getTime() + (24 * 60 * 60 * 1000));
        $.cookie("search", html,{expires:cookietime});
        window.location.href = "search.html";
    });
	var _width=$(window).width();
	$('.header-nav-menu').css('width',_width);
	$('.header-nav-menu').css('left','-40px');

    $.ajax({
        url:'/user/get_user_info.do',
        type:'post',
        success:function(result){
            var name=result.data.username;
            if(!result.status){
                $.ajax({
                    url: '/cart/get_cart_product_count.do',
                    type: 'post',
                    success: function (res) {
                        console.log(res.data);
                        $('.gwc_number').html('('+res.data+')');
                        $('.cart-mini').css('background','rgba(255, 103, 0,.7)');
                    }
                });
                $('.login').html('<a href="javascript:;">'+name+' , 您好！</a><div class="info_select"> <a href="personal-center.html">个人中心</a> <a href="user-favorite.html">我的喜欢</a> <a href="javascript:;" class="changeInfo">修改信息</a><a href="javascript:;" class="quit">退出登录</a> </div>');
                $('.quit').click(function(){
                    $.ajax({
                        url:'/user/logout.do',
                        type:'post',
                        success:function(result){
                            if(!result.status){
                                $('.hint').html('');
                                window.location.href='index.html';
                            }
                        }
                    });
                });
                $('.changeInfo').click(function(){
                    window.location.href='change-information.html';
                });
            }
        }
    });
	$('.header-nav .nav-list li').mouseover(function(){
	   $(this).find($('.header-nav-menu')).css('display','block');
	});
	$('.header-nav .nav-list li').mouseout(function(){
		$(this).find($('.header-nav-menu')).css('display','none');
	});
	$('.site_modification').click(function(){
		$('.sms_verification_box').css('display','block');
	});
	$('.sms_verification_box .close').click(function(){
		$('.sms_verification_box').css('display','none');
	});
	$('.sms_verification_box .abolish').click(function(){
		$('.sms_verification_box').css('display','none');
	});
	$('.sms_verification_box .ascertain').click(function(){
		$('.sms_verification_box').css('display','none');
	});



	$('.pay_modification').click(function(){
		$('.delivery_verification_box').css('display','block');
	});
	$('.delivery_verification_box .close').click(function(){
		$('.delivery_verification_box').css('display','none');
	});
	$('.delivery_verification_box .abolish').click(function(){
		$('.delivery_verification_box').css('display','none');
	});

	var html;
	$('.delivery_box li').click(function(){
		$('.delivery_box li').removeClass('active');
		$(this).addClass('active');
		html=$(this).children('.title').html();
	});
	$('.delivery_verification_box .ascertain').click(function(){
		$('.site_time').html(html);
		$('.delivery_verification_box').css('display','none');
	});
    var orderNo=$.cookie("orderNo");
    $.ajax({
        url:'/order/detail.do',
        data:{
            'orderNo':parseInt(orderNo)
        },
        success:function(str){
            if(!str.status){
                var total_prices=parseFloat(str.data.postage)+parseFloat(str.data.payment);
                $('.postage').html(str.data.postage+'元');
				$('.payment').html(str.data.payment+'元');
				$('.practical_money_num').html(total_prices+'元');
				$('.indent_num_i').html(str.data.orderNo);
				$('.statusDesc').html(str.data.statusDesc);
				$('.createTime').html(str.data.createTime);
				$('.paymentTime').html(str.data.paymentTime);
				$('.name').html(str.data.receiverName);
				$('.phone').html(str.data.shippingVo.receiverMobile);
				$('.address').html(str.data.shippingVo.receiverProvince+'&nbsp;'+str.data.shippingVo.receiverCity+'&nbsp;'+str.data.shippingVo.receiverDistrict+'&nbsp;'+str.data.shippingVo.receiverAddress);
                if($('.statusDesc').html()=="已付款"){
                    $('.bar').css('width','40%');
                    $('.pay_box').css('display','none');
                }
                if($('.statusDesc').html()=="未支付"){
                    $('.bar').css('width','20%');
                }
                if($('.statusDesc').html()=="已取消"){
                    $('.indent_predict').html('');
                    $('.progress_bar').remove();
                    $('.pay_box').css('display','none');
                }
				 var orderItemVoList=str.data.orderItemVoList;
				 for(var i=0;i<orderItemVoList.length;i++){
					  var cont='<li> <div class="figure"> <a href=""> <img src="'+str.data.imageHost+orderItemVoList[i].productImage+'" height="80" width="80" alt=""> </a> </div> <p class="goods_name">'+orderItemVoList[i].productName+'</p> <p class="goods_pric">'+orderItemVoList[i].currentUnitPrice+'元×'+orderItemVoList[i].quantity+'</p> </li>';
					  $('.goods_list').append(cont);
				 }
            }
        }
    });
    $('.pay').attr('id',orderNo);
    $('.pay').click(function(){
        var cookietime = new Date();
        var date = new Date();
        cookietime.setTime(date.getTime() + (24 * 60 * 60 * 1000));
        $.cookie('payment', $(this).attr('id') , { path: '/', expires: cookietime});
	});
    $('.cancel').click(function(){
        $.ajax({
            url:'/order/cancel.do',
            data:{
                'orderNo':parseInt(orderNo)
            },
            success:function(res){
                console.log(res);
                if(res.msg==null){
                    alert("取消成功");
                    location.reload();
				}else{
                    alert(res.msg);
				}
            }
        });
	});
</script>
	
</body>
</html>